<template>
   <div class="header">
       <div class="content">
           <div class="right">
               <div v-if="memNumber === '0'" class="type">Manager</div>
               <div v-if="memNumber === '1'" class="type">Accounting</div>
               <div v-if="memNumber === '2'" class="type">Frontdesk</div>
               <img v-if="memNumber === '0'" class="image" src="../../src/assets/images/闲云.jpg" @click="quit">
               <img v-if="memNumber === '1'" class="image" src="../../src/assets/images/ALKRay.jpg" @click="quit">
               <img v-if="memNumber === '2'" class="image" src="../../src/assets/images/You~.jpg" @click="quit">
               <span class="text">quit</span>
           </div>
       </div>
    </div>
</template>

<script>
import { memberMixin } from '@/utils/mixins/member'
export default {
    mixins : [ memberMixin ],
    name: 'Header',
    methods: {
        //退出登录
        quit() {
            this.$router.push('/')
        }
    },
}
</script>

<style lang="less" scoped>
.header{
    width: 100%;
    height: 6rem;
    position: fixed;
    left: 0;
    top: 0;
    background-color: #ffffff;
    padding-left: 300px;
    z-index: 10;
    .content{
        width: 80%;
        height: 100%;
        box-sizing: border-box;
        // background-color: red;
        display: flex;
        justify-content: center;
        // border-left: solid 1px #ccc;
        .right{
            .type{
                font-size: 4rem;
                color: #AA97B0;
            }
        }
        img{
            width: 5rem;
            height: 5rem;
            border-radius: 50%;
            position: fixed;
            top: 0.5rem;
            right: 0.5rem;
        }
        .text{
            position: fixed;
            top: 4rem;
            right: 5rem;
            color: #AA97B0;
            // display: block;
            // display: none;
        }
        .image:hover .text{
            color: red !important;
        }
    }
}
</style>